<template>
	<div :class="['sw_tab_wrapper', { border }]" :style="{ '--tabHeight': `${size}px` }">
		<span v-for="(item, index) in options" :key="index" :data-id="item.id" :class="{ active: item.id === tabValue }">{{ item.label }}</span>
	</div>
</template>

<script>
export default {
	name: 'swTabs',
	props: {
		value: { type: String, default: '' },
		size: { type: Number, default: 40 },
		border: { type: Boolean, default: false },
		options: { type: Array, default: () => [] },
		disabled: { type: Boolean, default: false }
	},
	data() {
		return {
			tabValue: this.value
		};
	},
	watch: {
		value(val) {
			this.tabValue = val;
		},
		tabValue(val) {
			this.$emit('input', val);
			this.$emit('change', val);
		}
	},
	mounted() {
		this.$el.addEventListener('click', (e) => {
			if (!this.disabled && e.target.nodeName === 'SPAN') {
				this.tabValue = e.target.dataset.id;
			}
		});
	},
	destroyed() {
		this.$el.removeEventListener('click');
	}
};
</script>

<style lang="scss" scoped>
.sw_tab_wrapper {
	display: flex;
	height: var(--tabHeight);
	line-height: var(--tabHeight);
	border-bottom: solid 1px #e4e7ed;
	&.border {
		border: solid 1px #e4e7ed;
	}
	span {
		flex: 1;
		font-size: 15px;
		overflow: hidden;
		border-left: solid 1px #e4e7ed;
		text-align: center;
		user-select: none;
		cursor: pointer;
		&:first-child {
			border-left: 0;
		}
	}
	span.active {
		font-weight: bold;
		color: var(--primary-active);
		background-color: var(--primary-background-hover);
	}
}
</style>
